<script>
import multipleCascadePicker from "@/components/popupPicker/multipleCascadePicker/index.vue"

export default {
  name: "collegeLocationSelector",
  components: { multipleCascadePicker },
  data() {
    return {
      list: [
        {
          value: "A",
          label: "A区",
          children: [
            {
              value: "北京",
              label: "北京",
            },
            {
              value: "天津",
              label: "天津",
            },
            {
              value: "河北",
              label: "河北",
            },
            {
              value: "山西",
              label: "山西",
            },
            {
              value: "辽宁",
              label: "辽宁",
            },
            {
              value: "吉林",
              label: "吉林",
            },
            {
              value: "黑龙江",
              label: "黑龙江",
            },
            {
              value: "上海",
              label: "上海",
            },
            {
              value: "江苏",
              label: "江苏",
            },
            {
              value: "浙江",
              label: "浙江",
            },
            {
              value: "安徽",
              label: "安徽",
            },
            {
              value: "福建",
              label: "福建",
            },
            {
              value: "江西",
              label: "江西",
            },
            {
              value: "山东",
              label: "山东",
            },
            {
              value: "河南",
              label: "河南",
            },
            {
              value: "湖北",
              label: "湖北",
            },
            {
              value: "湖南",
              label: "湖南",
            },
            {
              value: "广东",
              label: "广东",
            },
            {
              value: "重庆",
              label: "重庆",
            },
            {
              value: "四川",
              label: "四川",
            },
            {
              value: "陕西",
              label: "陕西",
            },
          ],
        },
        {
					value: "B",
          label: "B区",
          children: [
            {
              label: "内蒙古",
              value: "内蒙古",
            },
            {
              label: "广西",
              value: "广西",
            },
            {
              label: "海南",
              value: "海南",
            },
            {
              label: "贵州",
              value: "贵州",
            },
            {
              label: "云南",
              value: "云南",
            },
            {
              label: "西藏",
              value: "西藏",
            },
            {
              label: "甘肃",
              value: "甘肃",
            },
            {
              label: "青海",
              value: "青海",
            },
            {
              label: "宁夏",
              value: "宁夏",
            },
            {
              label: "新疆",
              value: "新疆",
            },
          ],
        },
        {
          label: "其他",
          value: "",
          children: [
            {
              label: "香港",
              value: "香港",
            },
            {
              label: "澳门",
              value: "澳门",
            },
            {
              label: "台湾",
              value: "台湾",
            },
          ],
        },
      ],
    }
  },
  props: {
    province_area: String, // A区B区其他
    provinceNames: Array, // 位置
  },
  methods: {
    open() {
      this.$refs.multipleCascadePicker.open()
    },
  },
  computed: {
    currentSelect: {
      get() {
				if (this.provinceNames.length === 0) {
					return []
				}
        return [
          {
            value: this.province_area,
            label: this.province_area,
            children: this.provinceNames.map((item) => ({
              value: item,
              label: item,
            })),
          },
        ]
      },
      set(val) {
        if (val.length > 0) {
          this.$emit("update:province_area", val[0].value)
          this.$emit(
            "update:provinceNames",
            val[0].children.map((item) => item.value),
          )
        } else {
          this.$emit("update:province_area", "")
          this.$emit("update:provinceNames", [])
        }
      },
    },
  },
  emits: ["change", "update:province_area", "update:provinceNames"],
}
</script>

<template>
  <view class="component">
    <multipleCascadePicker
      ref="multipleCascadePicker"
      :data="list"
      value-key="value"
      label-key="label"
      children-key="children"
      v-model="currentSelect"
      :singleSelectionAtParentLevel="true"
      title="院校位置选择"
      @change="$emit('change')"
    ></multipleCascadePicker>
  </view>
</template>

<style scoped lang="scss"></style>
